<template>
  <div class = "background">
  <div class="centered-container">
    <div class="centered-content">
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="password-form"
    >
      <el-form-item label="旧密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
  
      <el-form-item label="新密码" prop="newpassword">
        <el-input
          v-model="form.newpassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
  
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="form.confirmPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button @click="goback">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
  </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
  import api from "../api"
import { compileScript } from 'vue/compiler-sfc';
//引入路由
import { useRouter } from 'vue-router'
//获取路由器
let router = useRouter()
  const formRef = ref(null);
  
  const form = ref({
    password: '',
    newpassword: '',
    confirmPassword: '',
    username:''
  });
  
  const rules = {
    password: [
      { required: true, message: '请输入旧密码', trigger: 'blur' }
    ],
    newpassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 20, message: '密码长度应在 6 到 20 个字符之间', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认新密码', trigger: 'blur' },
      { validator: confirmPasswordValidator, trigger: 'blur' }
    ]
  };
  
  function confirmPasswordValidator(rule, value, callback) {
    if (value !== form.value.newpassword) {
      callback(new Error('确认密码与新密码不一致'));
    } else {
      callback();
    }
  }
  const goback = function(){
    router.push("/index");
  }
  const handleSubmit =  () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        alert('提交成功!');
        // 在这里处理表单提交逻辑
        form.value.username = sessionStorage.getItem("username");
        //console.log(form.value);
        let result = await api.edit("api/user/editpass",form.value);
        console.log("-----")
        console.log(result.code)
        if(result.code == 200){
          sessionStorage.removeItem("token");
          localStorage.removeItem("password");
        router.push("/login");
        }
      } else {
        console.log('表单验证失败');
        return false;
      }
    });
  };
  
  const handleReset = () => {
    formRef.value.resetFields();
  };
  </script>
  
  <style scoped>
  .password-form {
    max-width: 500px;
    margin: 0 auto;
  }
  .centered-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 至少为视口高度，确保有足够的空间进行居中 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.centered-content {
  /* 可以添加你需要的内边距、边框等样式 */
  text-align: center; /* 如果需要文本居中也可以添加这个 */
  margin: auto;
 
}
.background{
  background-image: url('./images/password.jpg'); /* 确保路径正确 */
  background-size: cover; /* 根据需要调整背景图片大小 */
  background-position: center; /* 背景图片居中显示 */
  height: 100vh; 
  background-image: url("../images/password.jpg");
}
  </style>
  